<template>
  <div class="box">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in bannerList" :key="index">
          <img :src="item.picUrl" alt />
        </van-swipe-item>
      </van-swipe>
      <div class="list">
        <ul>
          <li>
            <img src="../../assets/img/tubiao1.png" alt />
            <p>签到</p>
          </li>
          <li>
            <img src="../../assets/img/tubiao2.png" alt />
            <p>礼券</p>
          </li>
          <li  @click="$router.push('/kanlie')">
            <img src="../../assets/img/tubiao3.png" alt />
            <p>砍价</p>
          </li>
          <li @click="toogle">
            <img src="../../assets/img/tubiao4.png" alt />
            <p>专栏</p>
          </li>
        </ul>
      </div>
    </div>
    <Kan :kanjiaList="kanjiaList"></Kan>
    <Handpick></Handpick>
    <div class="quanshang"></div>
    <div class="ren">
      <span>人气推荐</span>
      <van-icon name="arrow"></van-icon>
    </div>
    <Popul :populList="populList"></Popul>
  </div>
</template>

<script>
import Kan from "../../components/home/kan";
import Handpick from "../../components/home/Handpick";
import Popul from "../../components/home/Popul";
export default {
  data() {
    return {
      bannerList: [],
      kanjiaList: [],
      populList: [],
    };
  },
  components: {
    Kan,
    Handpick,
    Popul,
  },
  created() {},
  mounted() {
    this.banner();
    this.kanjia();
    this.popul();
  },
  methods: {
    // 轮播
    banner() {
      this.$axios.get("https://api.it120.cc/small4/banner/list").then((res) => {
        this.bannerList = res.data;
        // console.log(res);
      });
    },
    // 砍价
    kanjia() {
      this.$axios
        .post("https://api.it120.cc/small4/shop/goods/kanjia/list")
        .then((res) => {
          //取出对象中key只，并且截取
          let ff = Object.keys(res.data.goodsMap).splice(-3);
          let arr = [];
          //通过key获取对象的value值，添加到数组中去
          ff.forEach((item) => {
            arr.push(res.data.goodsMap[item]);
          });
          this.kanjiaList = arr;
          // console.log(res);
        });
    },
    // 人气
    popul() {
      this.$axios
        .get("https://api.it120.cc/small4/shop/goods/list")
        .then((res) => {
          // console.log(res);
          let data = res.data.filter((item) => {
            return item.name.indexOf("测试") == -1;
          });
          this.populList = data.slice(1, 7);
        });
    },
    toogle(){
      this.$router.push("/handpic")
    }
  },
};
</script>

<style scoped lang="less">
.box {
  width: 100%;
  margin-bottom: 1rem;
  .banner {
    width: 7.5rem;
    position: relative;
    .my-swipe {
      width: 7.5rem;
    }
    img {
      width: 100%;
    }
  }
  .list {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border-radius: 0.2rem 0.2rem 0 0;
    ul {
      width: 100%;
      font-size: 0.4rem;
      display: flex;
      justify-content: space-around;
      img {
        width: 0.82rem;
        height: 0.68rem;
      }
    }
  }
  .ren {
    width: 100%;
    line-height: 0.93rem;
    text-align: center;
    font-size: 0.3rem;
  }
  .quanshang {
    width: 100%;
    height: 0.2rem;
    background-color: #f4f4f4;
    margin-top: 0.1rem;
  }
}
</style>
